<div class="nv-dialog">
  <div class="d-flex justify-content-between align-items-center">
    <h4 mat-dialog-title class="mb-2">
      {{ 'service.SWITCH_MODE' | translate }}
    </h4>
    <button
      (click)="onCancel()"
      class="mb-2"
      aria-label="Close dialog"
      mat-icon-button>
      <i class="eos-icons">close</i>
    </button>
  </div>
  <hr class="fancy mb-3" />
  <div mat-dialog-content>
    <form>
      <div class="clearfix margin-top-m">
        <mat-radio-group
          class="pull-left margin-right-m"
          aria-label="Select a mode"
          [(ngModel)]="mode"
          [ngModelOptions]="{ standalone: true }">
          <mat-radio-button value="discover" class="margin-right-s">{{
            'topbar.mode.LEARNING' | translate
          }}</mat-radio-button>
          <mat-radio-button value="monitor" class="margin-right-s">{{
            'topbar.mode.EVALUATION' | translate
          }}</mat-radio-button>
          <mat-radio-button value="protect" class="margin-right-s">{{
            'topbar.mode.ENFORCE' | translate
          }}</mat-radio-button>
        </mat-radio-group>
        <div class="text-warning text-sm pull-left">
          {{ zeroDriftHint }}
        </div>
      </div>
      <div class="clearfix margin-top-m">
        <mat-radio-group
          aria-label="Select a baseline profile"
          class="pull-left margin-right-m"
          [(ngModel)]="baselineProfile"
          [ngModelOptions]="{ standalone: true }"
          (change)="checkZeroDrift()">
          <mat-radio-button value="basic" class="margin-right-s">{{
            'enum.BASIC' | translate
          }}</mat-radio-button>
          <mat-radio-button value="zero-drift" class="margin-right-s">{{
            'enum.ZERODRIFT' | translate
          }}</mat-radio-button>
        </mat-radio-group>
        <div class="pull-left text-muted">
          {{ 'group.ZERODRIFT_COMMENT' | translate }}
        </div>
      </div>
      <div class="clearfix pb-2" *ngIf="noModeGroupList.length > 0">
        <div class="my-3">
          <span>{{noModeGroupMsg}}</span>
          <a role="button" class="pl-2" (click)="isExpandingGroupList = !isExpandingGroupList">
            {{ (isExpandingGroupList ? 'enum.HIDE_DETAILS' : 'enum.SHOW_DETAILS') | translate}}
          </a>
        </div>
        <div *ngIf="isExpandingGroupList" class="pt-1 pb-1 pl-2 pr-2" style="max-height: 150px; overflow-y: scroll; background-color: #eee;">
          <div *ngFor="let noModeGroup of noModeGroupList">{{noModeGroup.name}}</div>
        </div>
      </div>
      <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex justify-content-start align-items-center">
          <div
            *ngIf="!mode || baselineProfile === 'no-change'"
            class="d-flex justify-content-start align-items-center text-warning">
            {{ 'group.MULTI_MODE_SELECTION' | translate }}
          </div>
        </div>
        <div class="d-flex justify-content-end align-items-center">
          <button mat-stroked-button class="mr-2" (click)="onCancel()">
            {{ 'waf.ruleModal.CANCEL' | translate }}
          </button>
          <app-loading-button
            [appearance]="'mat-raised-button'"
            [color]="'primary'"
            [loading]="submittingUpdate"
            [disabled]="submittingUpdate"
            [text]="'setting.SUBMIT' | translate"
            (btnClick)="switchMode()">
          </app-loading-button>
        </div>
      </div>
    </form>
  </div>
</div>
